<template>
    <van-tabbar v-model="homeActive" class="h-[4.5rem] -mb-1" inactive-color="rgb(156, 163 ,222)" active-color="#fa769e">
        <van-tabbar-item to="/home">
            <span>首页</span>
            <template #icon>
                <i class="iconfont icon-shouye1 text-2xl"></i>
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/study">
            <span>学习</span>
            <template #icon>
                <i class="iconfont icon-boshimao text-2xl"></i>
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/xiaoq">
            <span>小Q</span>
            <template #icon>
                <i class="iconfont icon-Q text-2xl"></i>
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/wow">
            <span>Wow圈</span>
            <template #icon>
                <i class="iconfont icon-shexiangji text-2xl"></i>
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/vip">
            <span>会员</span>
            <template #icon>
                <i class="iconfont icon-vip_huiyuan text-2xl"></i>
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script setup lang="ts">
import { useIconStore } from '@/stores/IconStore';
import { toRefs } from 'vue';
const activeState = useIconStore()
const { homeActive } = toRefs(activeState) 


</script>

<style lang="scss" scoped></style>